<template>
  <view class="warehouse-container">
    <!-- A. 页面头部 -->
    <view class="page-header">
      <text class="page-title">标签打印</text>
    </view>

    <!-- B. 标签打印表单 -->
    <view class="info-section">
      <view class="section-header">
        <text class="section-title">标签信息</text>
      </view>
      <view class="info-form">
        <view class="form-item">
          <text class="form-label">创建日期</text>
          <text class="warehouse-display">{{ formData.currentDate }}</text>
        </view>
        <view class="form-item">
          <text class="form-label">标签编码</text>
          <input
            class="form-input form-input-large"
            type="text"
            v-model="printForm.materialName"
            placeholder="请输入标签编码"
          />
        </view>
        <view class="form-item">
          <text class="form-label">备注一</text>
          <input
            class="form-input form-input-large"
            type="text"
            v-model="printForm.remark1"
            placeholder="请输入备注一"
          />
        </view>
        <view class="form-item">
          <text class="form-label">备注二</text>
          <input
            class="form-input form-input-large"
            type="text"
            v-model="printForm.remark2"
            placeholder="请输入备注二"
          />
        </view>
      </view>
    </view>

    <!-- C. 打印操作区 -->
    <view class="info-section">
      <view class="section-header">
        <text class="section-title">打印操作</text>
      </view>
      <view class="print-actions">
        <button class="btn-submit" @click="handlePrint">
          <text class="btn-text">打印标签</text>
        </button>
        <button class="print-btn secondary" @click="handleReset">
          <text class="btn-text">重置表单</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { getCurrentDate } from "@/pages/smart/utils/date-helper.js";
import { pdaScanApi } from "@/pages/smart/pdaScan.js";

export default {
  name: "PdaPrint",
  // 混入PDA扫码功能
  mixins: [pdaScanApi],
  data() {
    return {
      // 表单数据
      formData: {
        currentDate: "", // 当前日期
      },
      // 打印表单
      printForm: {
        materialName: "", // 标签编码
        remark1: "", // 备注一
        remark2: "", // 备注二
      },
    };
  },
  mounted() {
    // 初始化当前日期
    this.formData.currentDate = getCurrentDate();

    // 初始化PDA扫码模块（来自mixin）
    this.initScanModule();
  },

  methods: {
    /**
     * 验证打印表单
     */
    validatePrintForm() {
      if (!this.printForm.materialName.trim()) {
        uni.showToast({
          title: "请输入标签编码",
          icon: "none",
        });
        return false;
      }

      return true;
    },

    /**
     * 处理打印
     */
    async handlePrint() {
      // 表单验证
      if (!this.validatePrintForm()) {
        return;
      }

      try {
        console.log("打印参数:", {
          materialName: this.printForm.materialName,
          remark1: this.printForm.remark1,
          remark2: this.printForm.remark2,
        });

        const printResult = this.pdaPrint(
          this.printForm.materialName,
          this.printForm.remark1,
          this.printForm.remark2
        );

        if (printResult) {
          uni.showToast({
            title: "打印成功",
            icon: "success",
          });
        } else {
          uni.showToast({
            title: "打印失败，请检查设备",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("打印失败:", error);
        uni.showToast({
          title: "打印失败，请重试",
          icon: "none",
        });
      }
    },
    /**
     * 重置表单
     */
    handleReset() {
      this.printForm = {
        materialName: "",
        remark1: "",
        remark2: "",
      };

      uni.showToast({
        title: "表单已重置",
        icon: "success",
      });
    },
  },
  beforeDestroy() {
    // 停止PDA扫码，释放资源（来自mixin）
    this.stopPdaScan();
  },
};
</script>

<style scoped lang="scss">
@import "~@/pages/smart/scss/create.scss";

/* 表单样式调整 */
.form-item {
  position: relative;
  margin-bottom: 20rpx;
}

.form-label {
  display: block;
  margin-bottom: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.warehouse-display {
  padding: 24rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #666;
}

.form-input {
  width: 100%;
  padding: 24rpx;
  border: 2rpx solid #ddd;
  border-radius: 12rpx;
  font-size: 32rpx;
  background: #fff;
  transition: all 0.3s ease;

  &:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2);
    outline: none;
  }

  &::placeholder {
    color: #999;
    font-size: 30rpx;
  }
}

.form-input-large {
  min-height: 88rpx;
  font-size: 36rpx;
  padding: 28rpx 24rpx;
  
  &::placeholder {
    font-size: 34rpx;
  }
}

/* 打印操作区样式 */
.print-actions {
  display: flex;
  gap: 24rpx;
  margin-top: 40rpx;
}

.btn-submit,
.print-btn.secondary {
  flex: 1;
  padding: 28rpx 32rpx;
  border-radius: 12rpx;
  font-size: 34rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.btn-submit {
  background: #007aff;
  color: #fff;
  border: none;
  
  &:hover {
    background: #0056cc;
  }
}

.print-btn.secondary {
  background: #f8f9fa;
  color: #6c757d;
  border: 2rpx solid #dee2e6;
  
  &:hover {
    background: #e9ecef;
  }
}

.btn-text {
  font-size: 34rpx;
  font-weight: 500;
}
</style>
